<!-- 管理员登录页面 -->
<template>
  <el-container>
    <el-header class="header">
      <h1>学生公寓分配管理系统——管理端</h1>
    </el-header>
    <el-main class="login">
      <el-form :label-position="labelPosition" label-width="60px  " :model="admin">
        <el-form-item label="用户名">
          <el-input v-model="admin.username" type="text" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="admin.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-link type="primary" style="float:right;" @click="forgetPassword">忘记密码</el-link>
        <el-form-item style="margin-top: 60px;">
          <el-button type="primary" style="width:42%; margin:10px; " @click="adminLogin">
            登录
          </el-button>
          <router-link to="/admin/register">
            <el-button type="primary" style="width:42%; margin:10px;">
              注册
            </el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ElMessage } from 'element-plus'
import axios from 'axios'

export default {
  data() {
    return {
      labelPosition: 'right',
      admin: {
        username: '',
        password: ''
      },
    }
  },
  methods: {

    /*
      管理员登录
     */
    adminLogin() {

      // 判断用户名是否为空
      if (this.admin.username == '') {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '请输入用户名',
          type: 'error',
        })
        return;
      }
      // 判断密码是否为空
      if (this.admin.password == '') {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '请输入密码',
          type: 'error',
        })
        return;
      }

      // 用URLSearchParams封装请求参数
      let postData = new URLSearchParams();
      postData.append('username', this.admin.username);
      postData.append('password', this.admin.password);

      let that = this.$router;
      // 通过axios请求后端数据
      axios.post('/admin/login', postData)
          .then(function(res) {
            console.log(res.data)
            if (res.data.data && res.data.data.role == 0) {
              ElMessage({
                showClose: true,
                message: '当前未审核（无权限），请联系系统管理员！',
                type: 'error',
              })
              return;
            }
            if (res.data.status == 10000) {
              ElMessage({
                showClose: true,
                message: '登录成功',
                type: 'success',
              })

              // 将数据保存到sessionStorage
              sessionStorage.setItem('username', res.data.data.username);
              sessionStorage.setItem('role', res.data.data.role);
              sessionStorage.setItem('buildingName', res.data.data.buildingName);

              // 跳转到管理员后台页面
              that.push('/admin')
            } else if (res.data.status == 10006) {
              ElMessage({
                showClose: true,
                message: '用户名或密码错误',
                type: 'error',
              })
            } else {
              ElMessage({
                showClose: true,
                message: '登录失败，系统异常。',
                type: 'error',
              })
            }
          })
    },

    /*
      忘记密码
     */
    forgetPassword() {
      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '请联系系统管理员重置密码，谢谢！',
        type: 'error',
      })
    }
  },
  mounted() {
    // 删除后端session
    axios.get("/admin/logout")
        .then(function(res) {
          console.log(res)
        })
  }
}
</script>

<style scoped>
.el-header {
  text-align: center;
  margin-top: 60px;
}
.login {
  width: 400px;
  margin: 80px auto;
}
</style>